<template>
    <el-dialog class="eldialog" title="详情" :visible.sync="open" width="65%" append-to-body :before-close="closeDelDialog">
        <el-row>
            <el-col :span="8" class="flexName">
                <label>鉴定任务名称：</label>
                <el-input v-model="rowInfo.JIANDINGRENWUNAME" placeholder=""></el-input>
            </el-col>
        </el-row>

        <el-row :gutter="10" class="mb8" v-if="rowInfo.JIANDINGSTATE==1">
            <el-col :span="1.5">
                <el-button type="danger" plain icon="el-icon-delete" @click="onDelTap">删除</el-button>
            </el-col>
        </el-row>
        <el-row :gutter="10">
            <el-col :span="24">
                <!-- <el-table :data="tableList" border style="width: 100%;" :height="tableHeigth" v-loading="loading"
                    @selection-change="handleSelectionChange" @cell-dblclick="celldblclick" ref="reftable">
                    <el-table-column type="selection" width="50" align="center" header-align="center">
                    </el-table-column>
                    <el-table-column v-for="(col, index) in tableHeaderList" :key="index" :prop="col.FIELD_NAME"
                        :label="col.FIELD_CAPTION" align="center" header-align="center" show-overflow-tooltip
                        :render-header="renderHeader">
                        <template slot-scope="scope">
                            {{ scope.row[col.FIELD_NAME] ? scope.row[col.FIELD_NAME] : '' }}
                        </template>
                    </el-table-column>
                    <el-table-column label="初审人员" align="center" header-align="center"
                        prop="CHUSHEN_PERSON"></el-table-column>
                    <el-table-column label="初审状态" align="center" header-align="center"
                        prop="CHUSHEN_TIJIAO"></el-table-column>
                    <el-table-column label="复审人员" align="center" header-align="center"
                        prop="FUSHEN_PERSON"></el-table-column>
                    <el-table-column label="复审状态" align="center" header-align="center"
                        prop="FUSHEN_TIJIAO"></el-table-column>
                </el-table> -->
                <tableList :tableHeaderList="tableHeaderList" :tableData="tableList" :loading="loading"
                    :tableHeight="tableHeigth" @sortChange="sortChange" @handleSelectionChange="handleSelectionChange"
                    @celldblclick="celldblclick" ref="reftable" :isKFJDDetail="true">
                </tableList>
                <pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize"
                    @pagination="getdatalistbyrenwuidPost" />
            </el-col>
        </el-row>
        <!--start  组件详情 -->
        <jianDetailsOpen v-if="jianDetailsOpen" :open="jianDetailsOpen" :celldbData="celldbData"
            @detailsHandleClose="detailsHandleClose">
        </jianDetailsOpen>
        <!--end 组件详情 -->
        <!-- start 组卷\项目详情 -->
        <juanDetailsOpen v-if="juanDetailsOpen" :open="juanDetailsOpen" :celldbData="celldbData"
            @detailsHandleClose="detailsHandleClose"></juanDetailsOpen>
        <!-- end 组卷\项目详情 -->
    </el-dialog>
</template>
<script>
import { getshowfield } from "@/api/archive/fileCollection/offlinReception" //获取展示指定table 表头
import { getjobinfo, getdatalistbyrenwuid, deletearchive } from "@/api/archive/archivalAppraisal/classificationIdentify/openArchivesAppraisal"
import { getLastIndexOf } from "@/utils/index.js"
import jianDetailsOpen from '@/components/componentsJianDetails/index.vue' //件详情
import juanDetailsOpen from '@/components/componentsJuanDetails/index.vue' //卷详情
import tableList from "@/components/tableList/index.vue"
import { getGroupTree } from "@/api/archive/archivesCategory.js"
export default {
    props: ['open', 'rowInfo'],
    components: {
        jianDetailsOpen,
        juanDetailsOpen,
        tableList
    },
    watch: {
        rowInfo: {
            handler(valNew) {
                if (valNew) {
                    getjobinfo(valNew.ID).then(res => {
                        this.info = res.data.jobinfo;
                        this.getshowfieldPost();
                        this.getGroupTreePost(this.info.categoryId)
                    })
                }



            }, immediate: true
        },
    },
    data() {
        return {
            loading: false,
            tableHeaderList: [],
            tableList: [],
            pageNum: 1,
            pageSize: 10,
            // 总条数
            total: 0,
            tableHeigth: "500",
            fields: [],
            jianDetailsOpen: false,//件详情弹窗
            juanDetailsOpen: false,//卷详情弹窗
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
        }
    },
    updated() {
        // this.$refs["reftable"].doLayout();
    },
    created() {
      if (this.$refs["reftable"]) {
        this.$refs["reftable"].doLayout();
      }
    },
    methods: {
        // 表头部重新渲染
        renderHeader(h, { column, $index }) {
            // 新建一个 span
            let span = document.createElement('span');
            // 设置表头名称
            span.innerText = column.label;
            // 临时插入 document
            document.body.appendChild(span);
            // 重点：获取 span 最小宽度，设置当前列，注意这里加了 20，字段较多时还是有挤压，且渲染后的 div 内左右 padding 都是 10，所以 +20 。（可能还有边距/边框等值，需要根据实际情况加上）
            column.minWidth = span.getBoundingClientRect().width + 100;
            // 移除 document 中临时的 span
            document.body.removeChild(span);

            // var element = document.querySelector('.el-table__body-wrapper');
            // element.style.height = this.tableHeight - 52 + "px"

            return h('span', column.label);
        },

        // 多选框选中数据
        // handleSelectionChange(selection) {
        //     this.ids = selection.map(item => item.ID)
        //     this.single = selection.length !== 1
        //     this.multiple = !selection.length
        // },
        handleSelectionChange(ids, single, multiple, selection) {
            console.log(ids, single, multiple, selection)
            this.ids = ids;
            this.single = single;
            this.multiple = multiple;
        },

        //获取表头列表
        getshowfieldPost() {
            var level = "";
            if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "F") {  //F 件
                level = "jian"
            } else if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "V") { //卷
                level = "juan"
            } else { //项目
                level = "juan"
            }
            getshowfield({
                categoryId: this.info.categoryId,
                level: level,
                menuId: this.$route.meta.menuId
            }).then(res => {
                this.tableHeaderList = res.data;
                for (var i in res.data) {
                    this.fields.push(res.data[i].FIELD_NAME)
                }
                this.getdatalistbyrenwuidPost()
            })
        },

        //获取table数据列表
        getdatalistbyrenwuidPost() {
            this.loading = true;
            getdatalistbyrenwuid({
                renwuid: this.info.ID,
                fields: this.fields.toString(),
                menuId: this.$route.meta.menuId,
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                order: this.order
            }).then(res => {
                this.tableList = res.rows;
                this.total = res.total;
                this.loading = false;
            })
        },
        //排序
        sortChange(val) {
            this.order = val;
            this.getdatalistbyrenwuidPost();
        },
        //档案门类树门类根据categoryID回显
        getGroupTreePost(ID) {
            getGroupTree(ID).then(response => {
                console.log(response, this.info, "++++++++++++++++++++")
                if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "F") {  //F 件
                    this.subStr = response.data.fileTableName
                } else if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "V" || getLastIndexOf(this.info.SUB_TABLE_NAME) == "X") { //卷//项目
                    this.subStr = response.data.folderTableName
                }
            });
        },
        //双击进入详情
        celldblclick(row, column, cell, event) {
          // console.log(row, event, "sdkfjkl")
          // if (event.type === "dblclick") {
          var level = "";
          if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "F") {  //F 件
            level = 0
          } else if (getLastIndexOf(this.info.SUB_TABLE_NAME) == "V") { //卷
            level = 1
          } else { //项目
            level = 1

          }
          this.celldbData = {
            id: row.ID,
            categoryId: this.info.categoryId,
            menuId: this.$route.meta.menuId,
            sub_table_name: this.subStr,
            label: "标题",
            level: level,
            ifSub_table_name: this.subStr,
            isDel: "0",  //判断是回收站数据还是接收收据 isDel:1  回收站    isDel:0 //离线接收、档案接收、在线接收
            tableHeaderList: this.tableHeaderList
          }
          this.$nextTick(() => {
            if (getLastIndexOf(this.subStr) == "F") {  //F 进入件详情
              this.jianDetailsOpen = true;
            } else { //进入卷详情 和项目详情
              this.juanDetailsOpen = true
            }
          })
          // }

        },
        //关闭详情页面
        detailsHandleClose() {
            this.jianDetailsOpen = false;
            this.juanDetailsOpen = false;
        },
        //删除
        onDelTap() {
            if (!this.multiple) {
                this.$modal.confirm('是否确认删除当前数据项？').then(() => {
                    deletearchive({
                        renwuid: this.info.ID,
                        ids: this.ids
                    }).then(res => {
                        this.$modal.msgSuccess(res.msg);
                        this.getdatalistbyrenwuidPost();
                    })

                }).catch(() => { });
            } else {
                this.$message({ message: '请选择删除的数据!', type: 'warning' })
            }
        },
        closeDelDialog() {
            this.$emit("closeDelDialog")
        }
    }
}
</script>
<style lang="scss" scoped="scoped" >
.eldialog ::v-deep .el-dialog__body {
    padding: 10px 20px 25px !important;
}

.eldialog ::v-deep .el-dialog {
    // padding: 0 20px 20px 20px !important;
    display: flex;
    flex-direction: column;
    margin: 0 !important;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-height: calc(100% - 30px);
    max-width: calc(100% - 30px);
}

.eldialog ::v-deep .el-dialog .el-dialog__body {
    flex: 1;
    overflow-x: hidden;
}

.eldialog ::v-deep ::v-deep .el-form-item__content {
    line-height: 26px;
}

.eldialog .elinput {
    border: 0 !important
}

.eldialog .flexName {
    display: flex;
    flex-direction: row;
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px;

    label {
        width: 185px;
        font-size: 17px;
    }

    ::v-deep input {
        // border:0!important;
    }
}
</style>
